<template>
  <div class="tree-list">
    <div class="tree-title" v-if="showTitle">{{title}}<el-button class="btn" type="primary" v-if="showAdd" :loading="loading" @click="addFn">新建</el-button></div>
    <el-tree :data="data" default-expand-all :props="defaultProps" node-key="id" :expand-on-click-node="false" >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span class="node-look" v-if="data.pid != 0">
            <a @click="handleNodeClick(node)">查看</a>
          </span>
        </span>
      </template>
    </el-tree>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
interface Tree {
  label: string
  children?: Tree[]
}
export default defineComponent({
  name: 'NavTreeMenu',
  props: {
    showTitle: {
      type: Boolean,
      default: true
    },
    title : {
      type: String,
      default: '我是标题'
    },
    showAdd: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: () => {
        return [{
          label: '厂商A',
          pid: '0',
          id: '0',
          children: [
            {
              pid: '1',
              label: '点播1',
              id: '1',
            },
            {
              pid:'2',
              label: '点播2',
              id: '2'
            },
          ],
        }]
      }
    }
  },
  emits: ['change', 'add'],
  setup(prop, ctx) {
    const defaultProps = {
      children: 'children',
      label: 'label',
    }
    const loading = ref(false)
    const handleNodeClick = (e) => {
      ctx.emit('change', e.data);
    }
    const addFn = () => {
      ctx.emit('add');
    }
    return {
      handleNodeClick,
      defaultProps,
      loading,
      addFn
    }
  }
})
</script>
<style lang="scss" scoped>
.tree-list{
  width: 100%;
  display: block;
  .tree-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    height: 40px;
    line-height: 40px;
  }
  .node-look{
    margin-left: 40px;
    color: var(--el-color-primary);
  }
  .btn{
    margin-left: 60px;
  }
}
</style>